<template>
  <v-container>
    <v-container>
      <v-row align="center"
             justify="center"
             style="margin-top:20%">
        <v-col cols="6"
               class="text-center my-20">
          <v-img :src="require('@/assets/img/logo2.png')"
                 style="width: 100%" />
        </v-col>
        <v-col cols="11">
          <v-card class="mx-auto">
            <v-card-text>
              <v-form>
                <v-text-field label="柜员号"
                              v-model="staffNumber"
                              prepend-icon="fa-user" />
                <v-text-field label="密码"
                              v-model="password"
                              prepend-icon="fa-lock"
                              autocomplete="off"
                              type="password" />
              </v-form>
              <div class="text-center ma-2">
                <v-btn icon
                       large
                       @click="sendLogin">
                  <v-icon size="35">fa-sign-in</v-icon>
                </v-btn>
              </div>
            </v-card-text>
          </v-card>
        </v-col>
      </v-row>

    </v-container>

    <v-snackbar top='true'
                class="text-center"
                centered
                width="100"
                v-model="snackbar"
                :timeout="2100">
      {{ '工商银行提醒您:欢迎登录! '}}
    </v-snackbar>
  </v-container>

</template>

<script>
export default {
  data() {
    return {
      snackbar: false,
      staffNumber: 'IB1234567',
      password: 'IB1234567',
    };
  },
  methods: {
    sendLogin() {
      this.snackbar = true;
    },
  },
};
</script>

<style scoped></style>